<dom-module id="editor-select-preview">
  <style>
    editor-select {
      margin: 5px;
      width: 200px;
    }

    editor-label {
      margin: 2px 0px;
    }
  </style>

  <template>
    <preview-item
      header="editor-select[placeholder]"
      desc="set attribute with 'placeholder'"
    >
      <editor-select></editor-select>
      <editor-select placeholder="select a item"></editor-select>
    </preview-item>

    <preview-item
      header="editor-select[disabled]"
      desc="set attribute with 'disabled'"
    >
      <editor-select disabled></editor-select>

      <editor-select value="disabled" disabled>
        <editor-option value="normal" text="normal">normal</editor-option>
        <editor-option value="disabled" text="disabled">disabled</editor-option>
      </editor-select>

      <editor-select placeholder="placeholder" disabled></editor-select>
    </preview-item>

    <preview-item
      header="editor-option[disabled]"
      desc="set <editor-option>'s attribute with 'disabled'"
    >
      <editor-select value="normal">
        <editor-option value="normal" text="normal">normal</editor-option>
        <editor-option value="disabled" text="disabled" disabled>disabled</editor-option>
      </editor-select>
    </preview-item>

    <preview-item
      header="editor-select with item"
      desc="add <editor-option> into <editor-select>"
    >
      <editor-select>
        <editor-option value="item1" text="item1" on-click="_onclick">item1</editor-option>
        <editor-option value="item2" text="item2">item2</editor-option>
        <editor-option value="item3" text="item3">item3</editor-option>
        <editor-option value="item4" text="item4">item4</editor-option>
        <editor-option value="item5" text="item5">item5</editor-option>
      </editor-select>
    </preview-item>

    <preview-item
      header="editor-select with default value"
      desc="set attribute with 'value'"
    >
      <editor-select value="item2">
        <editor-option value="item1" text="item1">item1</editor-option>
        <editor-option value="item2" text="item2">item2</editor-option>
        <editor-option value="item3" text="item3">item3</editor-option>
        <editor-option value="item4" text="item4">item4</editor-option>
        <editor-option value="item5" text="item5">item5</editor-option>
        <editor-option value="item6" text="item6">item6</editor-option>
      </editor-select>
    </preview-item>

    <preview-item
      header="editor-select items with custom element"
      desc="you can set different element in <editor-option>,not only text."
    >
      <editor-select value="I'm a &lt;editor-label&gt;">
        <editor-option value="I'm a text" text="I'm a text">I'm a text</editor-option>
        <editor-option value="I'm a &lt;editor-label&gt;" text="I'm a &lt;editor-label&gt;">
          <editor-label class="mini">I'm a &lt;editor-label&gt; </editor-label>
        </editor-option>
        <editor-option value="FontAwesome" text="FontAwesome">
          <i class="fa fa-github"></i>
        </editor-option>

        <editor-option value="FontAwesome && text" text="FontAwesome && text">
          <i class="fa fa-github"></i>
          Github
        </editor-option>
        <editor-option value="custom css tyle" text="custom css tyle">
          <div style="color: yellow;text-align:center;">custom css tyle</div>
        </editor-option>
        <editor-option value="more" text="more...">more...</editor-option>
      </editor-select>
    </preview-item>

    <preview-item
      header="call Event 'on-value-changed'"
      desc="listen to 'on-value-changed' event"
    >
      <editor-select id="testEvent" on-value-changed="_onValueChanged" value="item2">
        <editor-option value="item1" text="item1">item1</editor-option>
        <editor-option value="item2" text="item2">item2</editor-option>
        <editor-option value="item3" text="item3">item3</editor-option>
        <editor-option value="item4" text="item4">item4</editor-option>
        <editor-option value="item5" text="item5">item5</editor-option>
        <editor-option value="item6" text="item6">item6</editor-option>
      </editor-select>
    </preview-item>

    <preview-item
      header="editor-select with different width"
      desc="Select with different width"
    >
      <editor-select style="width: 80px;" value="item1">
        <editor-option value="item1">80px</editor-option>
      </editor-select>

      <editor-select style="width: 100px;" value="item1">
        <editor-option value="item1">100px</editor-option>
      </editor-select>

      <editor-select style="width: 120px;" value="item1">
        <editor-option value="item1">120px</editor-option>
      </editor-select>

      <editor-select style="width: 140px;" value="item1">
        <editor-option value="item1">140px</editor-option>
      </editor-select>

      <editor-select style="width: 140px;" value="item1">
        <editor-option value="item1">
          I'm a long looong loooong option
        </editor-option>
      </editor-select>
    </preview-item>

    <preview-item
      header="editor-select-menu with different width"
      desc="Select with different width"
    >
      <editor-select-menu style="width: 140px; position: relative;">
        <editor-option value="item1">Hello</editor-option>
        <editor-option value="item1" selected>I'm Foobar</editor-option>
        <editor-option value="item1">Who Are You?</editor-option>
        <editor-option value="item1">I'm a long long option</editor-option>
        <editor-option value="item1">
          I'm a long looong loooong option
        </editor-option-menu>
      </editor-select>
    </preview-item>

  </template>

  <script>
    Editor.polymerElement({
      _onValueChanged: function () {
        Editor.log('_onValueChanged:' + this.$.testEvent.value);
      },

      _onclick: function () {
        console.log('click');
      },
    });
  </script>
</dom-module>
